<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{$data['meta']['title']}}</title>
    <meta name="description" content="{{$data['meta']['description']}}">
    <meta name="keywords" content="{{$data['meta']['keywords']}}">
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                    },
                },
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors;
            }
            .badge {
                @apply px-2 py-1 rounded-md text-xs font-medium;
            }
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 顶部导航栏 -->
    <header class="bg-white sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                <!-- 网站Logo -->
                <div class="flex items-center">
                    <a href="#" class="text-primary font-bold text-2xl">
                        知享平台
                    </a>
                </div>
                
                <!-- 桌面端导航菜单 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium">首页</a>
                    <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">文章</a>
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium">课程</a>
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium">社区</a>
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium">关于我们</a>
                </nav>
                
                <!-- 右侧操作按钮 -->
                <div class="flex items-center space-x-4">
                    <button class="hidden md:flex items-center text-gray-600 hover:text-primary transition-colors">
                        <i class="fa fa-search text-lg"></i>
                    </button>
                    <button class="hidden md:inline-block btn-primary">
                        登录
                    </button>
                    <!-- 移动端菜单按钮 -->
                    <button id="mobile-menu-btn" class="md:hidden text-gray-700 text-xl">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
            
            <!-- 移动端菜单 -->
            <div id="mobile-menu" class="md:hidden hidden mt-4">
                <nav class="flex flex-col space-y-3 pb-4">
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium py-2">首页</a>
                    <a href="#" class="text-primary font-medium py-2 border-l-4 border-primary pl-3">文章</a>
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium py-2">课程</a>
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium py-2">社区</a>
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium py-2">关于我们</a>
                </nav>
                <div class="flex space-x-3 pt-3 border-t">
                    <button class="flex-1 border border-primary text-primary rounded-lg py-2 hover:bg-primary/5 transition-colors">
                        注册
                    </button>
                    <button class="flex-1 bg-primary text-white rounded-lg py-2 hover:bg-primary/90 transition-colors">
                        登录
                    </button>
                </div>
            </div>
        </div>
    </header>
    
    <!-- 主内容区域 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <div class="mb-8 text-center">
            <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">
                {{$data['content']['pageTitle']}}
            </h1>
            <p class="text-gray-600">
                {{$data['content']['pageDescription']}}
            </p>
        </div>
        
        <!-- 搜索栏 -->
        {{include file="template/article/views/components/search.html"}}
        
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 左侧文章列表区域 -->
            <div class="lg:w-2/3">
                <!-- 视图切换和筛选工具栏 -->
                {{include file="template/article/views/components/slider.html"}}
                
                <!-- 文章列表 -->
                {{include file="template/article/views/components/articles.html"}}
                
                <!-- 分页导航 -->
                {{include file="template/article/views/components/pages.html"}}
                
                <!-- 为你推荐 -->
                {{include file="template/article/views/components/recommend.html"}}
            </div>
            
            <!-- 右侧边栏 -->
            <div class="lg:w-1/3 space-y-6">
                <!-- 订阅区域 -->
                {{include file="template/article/views/components/subscripe.html"}}
                
                <!-- 文章分类 -->
                {{include file="template/article/views/components/categories.html"}}
                
                <!-- 热门标签 -->
                {{include file="template/article/views/components/tags.html"}}
                
                <!-- 热门作者 -->
                {{include file="template/article/views/components/authors.html"}}
            </div>
        </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">知享平台</h3>
                    <p class="text-gray-400 mb-4 text-sm">
                        知享平台致力于分享知识、见解和前沿信息，助力每个人的成长与发展。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">内容分类</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">科技</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">商业</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">文化</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">健康</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">教育</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">关于我们</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">平台介绍</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">团队成员</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">加入我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系方式</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">帮助中心</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">法律信息</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">用户协议</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">版权声明</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">免责条款</a></li>
                    </ul>
                    <div class="mt-6 text-xs">
                        <p>© 2023 知享平台 版权所有</p>
                        <p class="mt-1">京ICP备12345678号</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 视图切换功能
        const cardViewBtn = document.getElementById('card-view-btn');
        const listViewBtn = document.getElementById('list-view-btn');
        const articleContainer = document.getElementById('article-container');
        
        // 卡片视图切换
        cardViewBtn.addEventListener('click', () => {
            // 更新按钮样式
            cardViewBtn.classList.remove('bg-gray-100', 'text-gray-600');
            cardViewBtn.classList.add('bg-primary', 'text-white');
            
            listViewBtn.classList.remove('bg-primary', 'text-white');
            listViewBtn.classList.add('bg-gray-100', 'text-gray-600');
            
            // 更新文章容器样式
            articleContainer.classList.remove('grid-cols-1');
            articleContainer.classList.add('md:grid-cols-2');
            
            // 移除列表视图特有的类
            if (articleContainer) {
                document.querySelectorAll('#article-container > article').forEach(article => {
                    article.classList.remove('flex', 'flex-col', 'md:flex-row');
                    if (article.querySelector('div:first-child')) {
                        article.querySelector('div:first-child').classList.remove('md:w-1/3');
                    }
                    if (article.querySelector('div:last-child')) {
                        article.querySelector('div:last-child').classList.remove('md:w-2/3');
                    }
                    if (article.querySelector('img')) {
                        article.querySelector('img').classList.remove('h-full');
                        article.querySelector('img').classList.add('h-48');
                    }
                });
            }
        });
        
        // 列表视图切换
        listViewBtn.addEventListener('click', () => {
            // 更新按钮样式
            listViewBtn.classList.remove('bg-gray-100', 'text-gray-600');
            listViewBtn.classList.add('bg-primary', 'text-white');
            
            cardViewBtn.classList.remove('bg-primary', 'text-white');
            cardViewBtn.classList.add('bg-gray-100', 'text-gray-600');
            
            // 更新文章容器样式
            articleContainer.classList.remove('md:grid-cols-2');
            articleContainer.classList.add('grid-cols-1');
            
            // 添加列表视图特有的类
            if (articleContainer) {
                document.querySelectorAll('#article-container > article').forEach(article => {
                    article.classList.add('flex', 'flex-col', 'md:flex-row');
                    if (article.querySelector('div:first-child')) {
                        article.querySelector('div:first-child').classList.add('md:w-1/3');
                    }
                    if (article.querySelector('div:last-child')) {
                        article.querySelector('div:last-child').classList.add('md:w-2/3');
                    }
                    if (article.querySelector('img')) {
                        article.querySelector('img').classList.remove('h-48');
                        article.querySelector('img').classList.add('h-full');
                    }
                });
            }
        });
        
        // 滚动时导航栏效果
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('shadow');
            } else {
                header.classList.remove('shadow');
            }
        });
    </script>
</body>
</html>